<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间选择器</title>
    <script src="../../js/jquery-1.10.1.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .datepicker {
        display: inline-block;
        position: relative;
        width: 280px;
        height: 30px;
    }

    .datepicker-box {
        width: 280px;
        height: 320px;
        position: absolute;
        left: 0;
        top: 30px;
        /* display: none; */
    }

    .datepicker-box .datepicker-header {
        width: 280px;
        height: 40px;
        display: flex;
    }

    .datepicker-header .header-prev {
        flex: 1;
    }

    .datepicker-header .header-next {
        flex: 1;
    }

    .datepicker-header .header-content {
        flex: 3;
    }

    .datepicker-header div {
        text-align: center;
        line-height: 40px;
        height: 40px;
        background-color: black;
        color: burlywood;
    }

    .datepicker-title {
        width: 280px;
        height: 40px;
    }

    .datepicker-title .item,
    .datepicke-content .item {
        float: left;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: black;
        color: blanchedalmond;
    }
</style>

<body>
    开始时间
    <input id="start" />
</body>
<script>
    Date.prototype.allDays = function () { //当前月有多少天
        let tempDate = new Date("2000-01-01");
        tempDate.setFullYear(this.getFullYear());//2021-01-01
        tempDate.setMonth(this.getMonth() + 1);//2021-11-01
        tempDate.setDate(0);//当前月的最后一天
        return tempDate.getDate();
    }

    Date.prototype.prevDays = function () { //上个月有多少天
        let tempDate = new Date("2000-01-01");
        tempDate.setFullYear(this.getFullYear());//2021-01-01
        tempDate.setMonth(this.getMonth());//2021-10-01
        tempDate.setDate(0);//当前月的最后一天
        return tempDate.getDate();
    }

    Date.prototype.firstDayWeek = function () { //当前月的第一天是星期几
        let tempDate = new Date("2000-01-01");
        tempDate.setFullYear(this.getFullYear());//2021-01-01
        tempDate.setMonth(this.getMonth());//2021-10-01
        return tempDate.getDay();
    }

    Date.prototype.dateFormat = function (str) { //日期格式刷
        let year = this.getFullYear();
        let month = this.getMonth() + 1;
        let date = this.getDate();
        return str.replace("yyyy", year).replace("mm", month).replace("dd", date);
    }

    $.fn.extend({
        dataPicker: function (option) {
            let that = this;

            this.parent = $("<div class='datepicker'>");
            $(this).wrap(this.parent);
            this.datePickerBox = $(`<div class="datepicker-box">`);
            $(this).parent().append(this.datePickerBox);
            this.datePickerBox.hide();

            this.datePickerBoxHeader = $(`<div class="datepicker-header">`);
            this.datePickerBox.append(this.datePickerBoxHeader);

            this.datePickerBoxHeaderPrevBtn = $(` <div class="header-prev">上</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderPrevBtn);

            this.datePickerBoxHeaderContext = $(`<div class="header-content">2021-10-11</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderContext);

            this.datePickerBoxHeaderNextBtn = $(`<div class="header-next">下</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderNextBtn);

            this.datePickerBox.append(` <div class="datepicker-title">
                <div class="item">一</div>
                <div class="item">二</div>
                <div class="item">三</div>
                <div class="item">四</div>
                <div class="item">五</div>
                <div class="item">六</div>
                <div class="item">日</div>
            </div>`);
            this.datePickerBoxContent = $(`<div class="datepicke-content">`);
            this.datePickerBox.append(this.datePickerBoxContent);

            if (option.date) {
                this.date = new Date(option.date);
                this.val(this.date.dateFormat("yyyy-mm-dd"));
            } else {
                this.date = new Date();
            }

            that.datePickerBoxHeaderContext.html(that.date.dateFormat("yyyy年mm月"))
            this.creat = () => {

                var prevDays = this.date.prevDays();//上个月有多少天
                var curentDays = this.date.allDays();//本月有多少天
                var weekDays = this.date.firstDayWeek();//本月第一天是星期几
                weekDays = weekDays = 0 ? 7 : weekDays;
                var nextDays = 42 - curentDays - weekDays + 1;

                //循环生成结构 分为三次 分别上 当 下
                this.datePickerBoxContent.html("");//清空
                for (let i = prevDays - weekDays + 2; i <= prevDays; i++) {
                    let item = $(`<div class="item"></div>`);
                    item.html(i);
                    this.datePickerBoxContent.append(item);

                    //生成的上一个月的时间
                    let tempDate = new Date("2000-01-01");
                    tempDate.setFullYear(this.date.getFullYear());
                    tempDate.setMonth(this.date.getMonth() - 1);
                    tempDate.setDate(i);//

                    item.data("date", tempDate.dateFormat("yyyy-mm-dd"));
                }
                for (let i = 1; i <= curentDays; i++) {
                    let item = $(`<div class="item"></div>`);
                    item.html(i);
                    this.datePickerBoxContent.append(item);

                    //生成的当月的时间
                    let tempDate = new Date("2000-01-01");
                    tempDate.setFullYear(this.date.getFullYear());
                    tempDate.setMonth(this.date.getMonth());
                    tempDate.setDate(i);//

                    item.data("date", tempDate.dateFormat("yyyy-mm-dd"));
                }
                for (let i = 1; i <= nextDays; i++) {
                    let item = $(`<div class="item"></div>`);
                    item.html(i);
                    this.datePickerBoxContent.append(item);

                    //生成的下月的时间
                    let tempDate = new Date("2000-01-01");
                    tempDate.setFullYear(this.date.getFullYear());
                    tempDate.setMonth(this.date.getMonth() + 1);
                    tempDate.setDate(i);//

                    item.data("date", tempDate.dateFormat("yyyy-mm-dd"));
                }

                $(this).click((e) => { //输入框点击
                    e.stopPropagation();
                    this.datePickerBox.show();
                });
                $(document).click(() => { //其他地方点击
                    this.datePickerBox.hide();
                });


                $(document).on("click", ".item", function () { //点击赋值给输入框
                    $(that).val($(this).data("date"));
                });
            }
            this.creat();

            // 绑定月份切换点击事件
            this.datePickerBoxHeaderNextBtn.click((e) => {//下一页的时间
                e.stopPropagation();
                that.date.setMonth(that.date.getMonth() + 1);
                that.creat();
                that.datePickerBoxHeaderContext.html(that.date.dateFormat("yyyy年mm月"));
            });
            this.datePickerBoxHeaderPrevBtn.click((e) => {//上一页的时间
                e.stopPropagation();
                that.date.setMonth(that.date.getMonth() - 1);
                that.creat();
                that.datePickerBoxHeaderContext.html(that.date.dateFormat("yyyy年mm月"));
            });
        }
    })




    $("#start").dataPicker({
        date: "2021-9-22"
    });

















</script>

</html>